<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content">
            <el-row :gutter="4">
              <el-form inline label-position="left" class="demo-form-inline">
                <el-form-item label="关键字:">
                  <el-input
                    class="mr10"
                    v-model="searchDto.keywords"
                    placeholder="请输入短信内容关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item label="模块:">
                  <el-select v-model="searchDto.module" placeholder="请选择">
                    <el-option
                      v-for="item in moduleTypes"
                      :key="item.keyword"
                      :label="item.label"
                      :value="item.keyword"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="发送人:">
                  <el-input
                    class="mr10"
                    v-model="searchDto.sender"
                    placeholder="请输入发送人"
                  ></el-input>
                </el-form-item>
                <el-form-item label="时间:">
                  <el-date-picker
                    class="mr5"
                    v-model="value4"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                    >查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                width="100px"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                label="内容"
                prop="message"
                align="center"
                width="300px"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="模块"
                prop="module"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.module | keyText("MODULE") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="发送时间"
                prop="createTime"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="发送人"
                prop="createUser"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="接收人"
                prop="shortUserName"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="发送方式"
                prop="sendWay"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.sendWay | keyText("SMS_SEND_WAY") }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="channel" label="短信通道" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.channel | keyText("SMS_CHANNEL") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="是否需要回复"
                prop="needReply"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.needReply ? "是" : "否" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="发送情况"
                align="center"
                show-overflow-tooltip
                prop="number"
              ></el-table-column>
              <el-table-column
                label="管理"
                width="150"
                fixed="right"
                align="center"
              >
                <template slot-scope="scope">
                  <el-tooltip content="详情" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-view"
                      @click="viewDetails(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import Moment from "moment";

export default {
  created() {
    this.getPageData(1);
  },
  data() {
    return {
      value4: [],
      searchDto: {
        pageIndex: 1,
        pageSize: 10,
        keywords: "",
        receiver: "",
        mobile: "",
        sender: "",
        module: "",
        channel: "",
        sendWay: "",
        startTime: "",
        endTime: ""
      },
      pageData: {},
      loading: false,
      moduleTypes: this.getDictionary("MODULE")
    };
  },
  watch: {},
  methods: {
    //获取分页
    getPageData(val) {
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getSmsPageList(tem).then(ret => {
        this.pageData = ret.data;
        this.pageData.records.map(item => {
          this.$set(item, "number", item.totalCount + "/" + item.successCount);
        });
      });
    },
    handleCurrentChange(val) {
      this.searchViewDto.pageIndex = val;
      this.getPageData1();
    },
    //查看详情
    viewDetails(row) {
      this.$router.push({ name: "smsHistoryViews", query: { id: row.id } });
    },
    search() {
      this.getPageData(1);
    },
    clear() {
      this.searchDto = {
        pageIndex: 1,
        pageSize: 10,
        keywords: "",
        receiver: "",
        mobile: "",
        sender: "",
        module: "",
        channel: "",
        sendWay: "",
        startTime: "",
        endTime: ""
      };
      this.value4 = [];
      this.getPageData(1);
    }
  }
};
</script>
<style scoped></style>
